<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader :show-filter="false">
          <template #search-content>
            <a-form layout="inline" :model="searchData">
              <a-form-item label="所属公司">
                <a-select popup-container="html"  v-model="searchData.firm" @change="searchGcChange">
                  <a-option :key="0" value="">无</a-option>
                  <a-option v-for="(gc, index) in gcList" :key="index">{{ gc.h_firm }}</a-option>
                </a-select>
              </a-form-item>
              <a-form-item label="仓库名称">
                <a-select popup-container="html"  v-model="searchData.warehouseName">
                  <a-option :key="0" value="">无</a-option>
                  <a-option v-for="(ck, index) in ckList" :key="index">{{ ck.name }}</a-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="doRefresh">查询</a-button>
              </a-form-item>
            </a-form>
            <AddButton @click="onAddItem"></AddButton>
          </template>
        </TableHeader>
      </template>
      <template #default>
        <a-table :bordered="false" :loading="tableLoading" :data="dataList" :pagination="false" :row-key="rowKey">
          <template #columns>
            <a-table-column v-for="item of tableColumns" :key="item.key" :align="item.align"
              :title="(item.title as string)" :width="item.width" :data-index="(item.key as string)" :fixed="item.fixed">
              <template v-if="item.key === 'index'" #cell="{ rowIndex }">
                {{ rowIndex + 1 }}
              </template>
              <template v-else-if="item.key ==='checkType'" #cell="{ record }">
                {{typetoStr(record.checkType)}}
              </template>
              <template v-else-if="item.key ==='keyInZt'" #cell="{ record }">
                <a-tag v-if="record.keyInZt == 0" color="#f53f3f">未完成</a-tag>
                <a-tag v-if="record.keyInZt == 1" color="#00b42a">已完成</a-tag>
              </template>
              <template v-else-if="item.key ==='actualZt'" #cell="{ record }">
                <a-tag v-if="record.actualZt == 0" color="#f53f3f">未完成</a-tag>
                <a-tag v-if="record.actualZt == 1" color="#00b42a">已完成</a-tag>
              </template>
              <template v-else-if="item.key ==='balanceZt'" #cell="{ record }">
                <a-tag v-if="record.balanceZt == 0" color="#f53f3f">未完成</a-tag>
                <a-tag v-if="record.balanceZt == 1" color="#00b42a">已完成</a-tag>
              </template>
              <template v-else-if="item.key ==='zt'" #cell="{ record }">
                <a-tag v-if="record.zt == 0" color="#f53f3f">未提交</a-tag>
                <a-tag v-if="record.zt == 1" color="#00b42a">已提交</a-tag>
              </template>

              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space>
                  <a-button v-if="record.zt===0" status="success" size="mini" @click="onUpdateItem(record)">编辑
                  </a-button>
                  <a-button v-if="record.zt===0" status="success" size="mini" @click="onSubmitItem(record,1)">提交
                  </a-button>
                  <a-button v-if="record.zt===1&&record.balanceZt == 0&&record.actualZt == 0" status="warning" size="mini"
                    @click="onSubmitItem(record,0)">撤销提交
                  </a-button>
                  <a-button v-if="record.lockZt===1" status="success" size="mini" @click="ckjs(record)">仓库解锁
                  </a-button>
                  <a-button v-if="record.zt===0" status="danger" size="mini" @click="onDeleteItem(record)">删除</a-button>
                  <a-button v-if="record.balanceZt == 1" status="warning" size="small"
                    @click="lookInfo(record)">平仓明细</a-button>
                  <a-button v-if="record.balanceZt == 1" status="warning" size="small"
                    @click="lookInfo1(record)">更换RFID</a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>

    </TableBody>
    <TableFooter ref="tableFooterRef" :pagination="pagination" />
    <ModalDialog ref="modalDialogRef" :title="actionTitle" @confirm="editOk">
      <template #content>
        <a-form ref="formRef" :model="editData">
          <a-form-item label="盘点工厂" field="firm" :rules="[{ required: true, message: '请选择设备工厂' }]"
            :validate-trigger="['change', 'input']">
            <a-select popup-container="html"  v-model="editData.firm" @change="editGcChange">
              <a-option v-for="(gc, index) in gcList" :key="index">{{ gc.h_firm }}</a-option>
            </a-select>
          </a-form-item>

          <a-form-item label="盘点仓库" field="warehouseName" :rules="[{ required: true, message: '请选择盘点仓库' }]"
            :validate-trigger="['change', 'input']">
            <a-select popup-container="html"  v-model="editData.warehouseName">
              <a-option v-for="(ck, index) in ckList" :key="index">{{ ck.name }}</a-option>
            </a-select>
          </a-form-item>

          <a-form-item label="盘点类型">
            <a-select popup-container="html"  multiple v-model="editData.ct" @change="ccc">
              <a-option v-for="(op, index) in opt" :key="index" :value="op.code">{{ op.categorie }}</a-option>
              <template #footer>
                <div style="padding: 6px 0; text-align: center;">
                  <a-button @click="quanxuan">全选</a-button>
                </div>
              </template>
            </a-select>
          </a-form-item>


          <a-form-item label="盘点时间" field="checkTime" :rules="[{ required: true, message: '请选择盘点时间' }]"
            :validate-trigger="['change', 'input']">
            <a-date-picker  popup-container="html"  show-time v-model="editData.checkTime" placeholder="" />
          </a-form-item>
        </a-form>
      </template>
    </ModalDialog>
    <ModalDialog ref="infoModal" title="差异明细" :width="1200">

      <template #content>
        <a-table :columns="infoColumns" row-key="productid" :data="infoList" :pagination="false">
          <template #state="{ record }">
          </template>
          <template #cy="{ record }">
            <a-tag v-if="record.diffNum == 0" color="#00b42a">{{ record.diffNum }}</a-tag>
            <a-tag v-else color="red">{{ record.diffNum }}</a-tag>
          </template>
          <template #checkZt="{ record }">
            <a-tag v-if="record.checkZt == 0" color="#00b42a">正常</a-tag>
            <a-tag v-else-if="record.checkZt == 1" color="red">未入库</a-tag>
            <a-tag v-else color="red">已入库</a-tag>
          </template>
        </a-table>
      </template>

    </ModalDialog>
    <ModalDialog ref="qr3" title="更换RFID" :width="800" @confirm="editOks">
      <template #content>
        <a-space>
          <a-form-item>
            <a-space>
              <a-input v-model="scanCode" size="small" @press-enter="scanCodeEnd" placeholder="" @input="sr()">
              </a-input>
            </a-space>
          </a-form-item>
          <a-form-item label="选择设备">
            <a-select popup-container="html"  v-model="searchForm.wh" style="width: 150px">
              <a-option :value="0">请选择</a-option>
              <a-option v-for="op in  options" :value="op.id" :key="op.id">{{ op.equipName }}
              </a-option>
            </a-select>

          </a-form-item>


        </a-space>
        <Scrollbar>
          <a-list size="small">
            <a-list-item v-for="(item, index) in codeList" :key="index">
              <template #actions>
                <a-button size="large" type="outline" status="warning"
                  @click="writerData(item.productInfoCode, item)">写入</a-button>
              </template>
              <a-list-item-meta>
                <template #title>
                  {{ item.productInfoCode }}
                </template>
                <template #avatar>
                  <a-avatar style="background-color: #eee;" v-if="item.rfidZt === 0">{{
                    item.serialNo
                  }}</a-avatar>
                  <a-avatar style="background-color: green;" v-else-if="item.rfidZt === 1">
                    {{
                      item.serialNo
                    }}</a-avatar>

                </template>

              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </Scrollbar>

      </template>
    </ModalDialog>
  </div>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useRowKey, useTable, useTableColumn, usePagination } from '@/hooks/table'
import { ModalDialogType } from '@/types/components'
import { Form, Message, Modal } from '@arco-design/web-vue'
import { defineComponent, toRaw, onMounted, ref, reactive } from 'vue'
import { TableColumnData } from '@arco-design/web-vue'
import { Message, Modal, Notification } from "@arco-design/web-vue";
export default defineComponent({
  name: 'StockCheckBegin',
  setup() {
    // RFID对象
    const qr3 = ref<ModalDialogType | null>(null);
    const table = useTable()
    const rowKey = useRowKey('id')
    const actionTitle = ref('添加盘点初始化')
    const searchForm = reactive({
      wh: 0,
      type: "单个产品",
      code: "请选择产品类别"
    })
    const infoColumns: TableColumnData[] = [
      {
        title: '包标Code',

        dataIndex: 'packLabelCode',
        fixed: 'left',
        width: 150,
      },

      {
        title: '产品编码',

        dataIndex: 'productInfoCode',
        fixed: 'left',
        width: 150,
      },
      {
        title: '公司',
        dataIndex: 'firm',
        width: 150,
      },
      {
        title: '仓库',
        dataIndex: 'warehouseName',
        width: 150,
      },
      {
        title: '布笼',
        dataIndex: 'shelveName',
        width: 150,
      },
      {
        title: '储位',
        dataIndex: 'storageName',
        width: 150,
      },
      {
        title: '产品名称',
        dataIndex: 'name',
        width: 150,
      },
      {
        title: '类别',
        dataIndex: 'categorie',
        width: 150,
      },
      {
        title: '规格',
        dataIndex: 'spec',
        width: 150,
      },
      {
        title: '计量单位',
        dataIndex: 'meterUnit',
        width: 150,
      }
      ,
      {
        title: '计数单位',
        dataIndex: 'countUnit',
        width: 150,
      }, {
        title: "差异状态",
        dataIndex: "checkZt",
        slotName: 'checkZt',
        width: 150,
      }
    ]
    const tableColumns = useTableColumn([
      table.indexColumn,
      {
        title: '盘点编号',
        key: 'code',
        dataIndex: 'code',
        width: 150,
      },
      {
        title: '所属工厂',
        key: 'firm',
        dataIndex: 'firm',
        width: 150,

      },
      {
        title: '盘点仓库',
        key: 'warehouseName',
        dataIndex: 'warehouseName',
        width: 150,
      },
      {
        title: '盘点类型',
        key: 'checkType',
        dataIndex: 'checkType',
        width: 150,

      },

      {
        title: '盘点时间',
        key: 'checkTime',
        dataIndex: 'checkTime',
        width: 150

      },
      {
        title: '库存录入时间',
        key: 'KeyInTime',
        dataIndex: 'KeyInTime',
        width: 150
      }, {
        title: '实际录入时间',
        key: 'actualTime',
        dataIndex: 'actualTime',
        width: 150
      },

      {
        title: '平仓时间',
        key: 'balanceTime',
        dataIndex: 'balanceTime',
        width: 150
      },
      {
        title: '提交状态',
        key: 'zt',
        dataIndex: 'zt',
        width: 150,

      },
      {
        title: '是否平仓',
        key: 'balanceZt',
        dataIndex: 'balanceZt',
        width: 150,
      },
      {
        title: '实际录入状态',
        key: 'actualZt',
        dataIndex: 'actualZt',
        width: 150,
      },

      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        fixed: 'right',
        width: 150
      },
    ])
    const pagination = usePagination(doRefresh)
    // 搜索对象
    const searchData = reactive({
      "id": '',
      "code": '',
      "firm": '',
      "warehouseName": "",
      "checkType": "",
      "checkTime": "",
      "keyInZt": "",
      "keyInTime": "",
      "actualZt": "",
      "actualTime": "",
      "balanceZt": "",
      "balanceTime": ""
    })

    // 请求表格数据的方法
    function doRefresh() {
      post({
        url: 'StockCheckBegin/list',
        data: {
          page: pagination.page,
          size: pagination.pageSize,
          ...toRaw(searchData)
        },
      })
        .then(({ data, code }) => {
          if (code === 200) {
            table.handleSuccess(data.records);
            pagination.setTotalSize(data.total)
          }

        })
        .catch(console.log)
    }
    // 修改 使用的对象
    const editData = reactive({
      ct: [],
      "id": '',
      "code": '',
      "firm": '',
      "warehouseName": "",
      "checkType": "",
      "checkTime": "",
      "keyInZt": "",
      "keyInTime": "",
      "actualZt": "",
      "actualTime": "",
      "balanceZt": "",
      "balanceTime": ""
    })
    // 修改弹窗对象
    const modalDialogRef = ref<ModalDialogType | null>(null);

    function onAddItem() {
      editData.id = ''
      editData.code = ''
      editData.firm = ''
      editData.warehouseName = ''
      editData.checkType = ''
      editData.checkTime = ''
      editData.balanceTime = ''
      editData.ct = []
      actionTitle.value = '添加盘点初始化'



      modalDialogRef.value?.toggle()
      formRef.value
        ?.clearValidate()
    }
    const scanCode = ref("");
    const scanCodeEnd = () => {
      if (scanCode.value === "") {
        return;
      }
      let data = JSON.parse(scanCode.value);
      let code1 = data.code;
      let split = code1.split("");
      let str = split[0] + split[1]

      if (str != "PI") {
        Message.warning({
          content: "请扫产品编码",
          duration: 5000
        })
        return;
      }
      if (codeList.value.length > 0) {
        let cks = codeList.value.filter((o: any) => {
          return o.productInfoCode === code1;
        });

        if (cks.length > 0) {
          Message.warning({
            content: '请勿重复扫码',
            duration: 5000
          });
          return;
        }
      }

      post({
        url: "StockCheck/getDetails",
        data: {
          stockCheckBeginid: id.value,
          "checkZt": 2,
          "productInfoCode": data.code
        }
      }).then(({ data, code }) => {
        if (code === 200) {

          if (str == "PI") {
            if (codeList.value.length > 0) {
              codeList.value.push(data[0])
            } else {
              codeList.value = data
            }
          }
          scanCode.value = ""
        } else {
          Message.warning({
            content: "无明细",
            duration: 5000
          })
        }
      })
    }
    function onUpdateItem(item: any) {
      editData.id = item.id
      editData.code = item.code
      editData.firm = item.firm
      editData.warehouseName = item.warehouseName
      editData.checkType = item.checkType
      editData.ct = (item.checkType || '').split(',').map((o: any) => {

        let c: any = opt.value.filter((cc: any) => {

          return cc.code === o
        })
        return c[0] ? c[0].code || '' : ''
      })
      editData.ct = editData.ct[0] == '' ? [] : editData.ct
      editData.checkTime = item.checkTime
      editData.balanceTime = item.balanceTime
      actionTitle.value = '编辑盘点初始化'
      modalDialogRef.value?.toggle()
      formRef.value
        ?.clearValidate()
    }
    const id = ref(String)
    const lookInfo1 = (item: any) => {
      id.value = item.id
      qr3.value?.toggle()
    }
    const lookInfo = (item: any) => {

      post({
        url: "StockCheck/getDetails",
        data: {
          stockCheckBeginid: item.id,
          productid: item.productid
        }
      }).then(({ data, code }) => {
        if (code === 200) {
          infoList.value = data
        } else {
          Message.warning({
            content: "无明细",
            duration: 5000
          })
        }
      })
      infoModal.value?.toggle();
    };
    function onSubmitItem(item: any, zt: number) {
      let balanceZt = item.balanceZt;
      if (balanceZt == 1) {
        Message.info('已经平仓不能撤回');
        return
      }
      post({
        url: 'StockCheckBegin/update',
        data: {
          "id": item.id,
          "zt": zt
        }
      }).then(({ code, data }) => {
        if (code === 200) {
          if (data == undefined) {
            data = "成功"
          }
          Message.success(data)
        } else if (code === 10302) {
          Message.warning({ content: data, duration: 5000 })
        } else {
          Message.warning({ content: data, duration: 5000 })
        }
      }).catch(() => {
        Message.error('网络错误')
      }).finally(() => {
        doRefresh()
      })
    }

    function onDeleteItem(data: any) {
      Modal.confirm({
        title: '提示',
        content: '是否要删除此仓库？',
        cancelText: '取消',
        okText: '删除',
        onOk: () => {
          post({
            url: 'StockCheckBegin/delete',
            data: [data.id]
          }).then(({ code }) => {
            if (code === 200) {
              Message.success('删除成功')
            } else {
              Message.success('删除失败')
            }
          }).catch(() => {
            Message.success('网络错误')
          }).finally(() => {
            doRefresh()
          })
        },
      })
    }
    const gcList = ref<{ warehouseName: string, id: number }[]>([])
    const ckList = ref<{ warehouseName: string, id: number }[]>([])
    // 加载
    onMounted(() => {

      post({
        url: 'firm/getfrim',
        data: {
          "firm": "",
          "bumen": "",
          "zu": "",
          "ziwei": "",
          "ren": ""
        }

      }).then((resp) => {
        gcList.value = resp.data

      })
      control();
    })
    function control() {

      post({
        url: "control/get",
        data: {
        },
      })
        .then(({ code, data }) => {
          if (code === 200) {
            options.value = data
          } else {
            Message.error({ content: '设备列表获取失败！', duration: 5000 })
          }
        })
        .catch(() => {
          Message.error({ content: '设备列表获取失败！', duration: 5000 })
        });
    }
    const opt = ref([])
    post({
      url: 'ProductCategoryCode/get'
    }).then(({ code, data }) => {
      if (code === 200) {
        opt.value = data
        doRefresh()
      }
    }).catch(() => {
      Message.error({
        content: '网络错误',
        duration: 5000
      })
    })
    const searchGcChange = () => {
      post({
        url: 'warehouse/get',
        data: {
          isStop: 1,
          firm: searchData.firm
        }
      }).then(({ data, code }) => {
        if (code === 200) {
          if (data.length > 0) {
            ckList.value = data
          } else {
            ckList.value.length = 0
            editData.warehouseName = ""
          }
        } else {
          Message.warning({ content: '获取数据失败！', duration: 5000 })
        }
      })
        .catch(() => {
          Message.warning({ content: '获取数据失败！', duration: 5000 })
        })
    }
    const editGcChange = () => {
      post({
        url: 'warehouse/get',
        data: {
          isStop: 1,
          firm: editData.firm
        }
      }).then(({ data, code }) => {
        if (code === 200) {

          if (data.length > 0) {
            ckList.value = data
          } else {
            ckList.value.length = 0
            editData.warehouseName = ""
          }
        } else {
          Message.warning({ content: '获取数据失败！', duration: 5000 })
        }
      })
        .catch(() => {
          Message.warning({ content: '获取数据失败！', duration: 5000 })
        })
    }

    // 仓库状态修改事件
    const stateChange = (id: number, e: any) => {
      post({
        url: 'StockCheckBegin/update',
        data: {
          id: id,
          isStop: e ? '1' : '0'
        }
      }).then(({ code, data }) => {
        if (code === 200) {
          Message.success('修改成功')
        } else {
          Message.warning({ content: data, duration: 5000 })
        }
      })
    }
    const formRef = ref<typeof Form>()
    const editOks = () => {
      qr3.value?.close()
    };
    const editOk = () => {
      formRef.value
        ?.validate()
        .then((error: any) => {
          if (error) {
            return
          }
          if (actionTitle.value === "添加盘点初始化") {
            post({
              url: 'StockCheckBegin/save',
              data: {
                ...toRaw(editData)
              }
            }).then(({ data, code }) => {
              if (code === 200) {
                Message.success('添加成功')
              } else {
                Message.warning({ content: '添加失败', duration: 5000 })
              }
            }).catch((err) => {
              Message.error('网络错误')
            }).finally(() => {
              modalDialogRef.value?.close()
              doRefresh()
            })
          } else {
            let toRaw1 = toRaw(editData);
            let map = {}
            for (var i in toRaw1) {
              if ("ct" != i) {
                map[i] = toRaw1[i]
              }
            }
            post({
              url: 'StockCheckBegin/update',
              data: map
            }).then(({ data, code }) => {
              if (code === 200) {
                Message.success('修改成功')
              } else {
                Message.warning({ content: data, duration: 5000 })
              }
            }).catch(() => {
              Message.error('网络错误')
            }).finally(() => {
              modalDialogRef.value?.close()
              doRefresh()
            })
          }
        })


    }
    const ccc = (v: any) => {
      editData.checkType = v.join(',')
    }
    //WH仓库，SL布笼，SG储位，PI产品流水,PK包标
    const quanxuan = () => {

      if (editData.checkType.split(',').length === opt.value.length && editData.checkType !== '') {
        editData.ct.length = 0
        editData.checkType = ''
      } else {
        (editData.ct as any) = opt.value.map((o: any) => o.code)
        editData.checkType = opt.value.map((o: any) => o.code).join(',')
      }
    }
    const typetoStr = (t: string): string => {

      if (!t || t == undefined) {
        return ''
      } else {
        let code = t.split(',')
        let names = code.map((o) => {
          let op = opt.value.filter((c: any) => {
            return c.code === o
          })

          if (op.length === 0) {
            return ''
          } else {
            return (op[0] as any).categorie || ''
          }

        })


        return names.join(',')
      }
    }
    const ckjs = (data: any) => {
      post({
        url: 'StockCheckLock/unLock?stockCheckBeginid=' + data.id
      }).then(({ data, code }) => {
        if (code === 200) {
          if (data == undefined) {
            data = "解仓成功"
          }
          Message.success(data)
        } else {
          Message.warning({ content: data, duration: 5000 })
        }
      }).catch(() => {
        Message.error('网络错误')
      })

    }
    const writerData = (pdcode: any, index: any) => {
      let a = options.value.filter((o) => {
        return o.id === searchForm.wh;
      })
      if (a.length === 0) {
        Message.warning({ content: '请先选择设备', duration: 5000 })
        return;
      }
      post({
        url: 'rfidWrite',
        data: {
          "equipAddress": a[0].equipAddress,
          "equipPort": a[0].equipPort,
          "data": pdcode,
          equipName: a[0].equipName
        }
      }).then(({ code, data }) => {
        if (code === 200) {
          Notification.success({
            title: '提示',
            content: '写入成功'
          })
          index.rfidZt = 1
          xgRfidZt(pdcode);
        } else {

          Notification.error({
            title: '提示',
            content: data
          })

        }
      }).catch(() => {
        Notification.error({
          title: '提示',
          content: '写入失败'
        })
        w_status.status[index] = 2
      })
    }
    let stockid = null;
    let rkTime = null;
    function xgRfidZt(itme: any) {
      codeList.value.forEach((o: any) => {
        if (o.productInfoCode == itme) {
          stockid = o.stockid
          rkTime = o.rkTime
        }
      })
      post({
        url: 'setStockBalanceZt',
        data: {
          "stockid": stockid,
          "productInfoCode": itme,
          "rkTime": rkTime,
          "id": id.value
        },
      }).then(({ data, code }) => {
        if (code === 200) {
          table.handleSuccess(data.records);
          pagination.setTotalSize(data.total)
        }

      })
    }
    const infoList = ref<any[]>([])
    const infoModal = ref<ModalDialogType | null>(null);
    const tagsData = ref<{}[]>([])
    const options = ref<any[]>([])
    const codeList = ref<{
      "countUnit": string,
      "productCode": string,
      "categorie": string,
      "productid": number,
      "num": string,
      "name": string,
      "meterUnit": string,
      "productInfoCode": string,
      "id": number,
      "spec": string,
      "rfidZt": number,
      "serialNo": number
    }[]>([])
    const timeArr = ref<any>([]);
    function sr() {

      let length = scanCode.value.length;
      if (length % 2 !== 0) {
        //求余数不为0是奇数
        timeArr[0] = new Date().getTime();
      } else {
        timeArr[1] = new Date().getTime();
      }
      //当输入第二位时判断两次输入的间隔，判断是否为手动输入，间隔过长清空值
      console.log(timeArr[1])
      if (length > 1 && Math.abs(timeArr[1] - timeArr[0]) > 300) {

        scanCode.value = "";
        Message.warning({ content: '请扫码', duration: 5000 })
      }
    }
    return {
      editOks,
      timeArr,
      sr,
      xgRfidZt,
      codeList,
      writerData,
      control,
      options,
      searchForm,
      tagsData,
      id,
      scanCode,
      scanCodeEnd,
      qr3,
      ckjs,
      typetoStr,
      ccc,
      opt,
      quanxuan,
      formRef,
      onSubmitItem,
      searchGcChange,
      editGcChange,
      editOk,
      gcList,
      ckList,
      pagination,
      modalDialogRef,
      stateChange,
      searchData,
      rowKey,
      editData,
      tableColumns,
      actionTitle,
      ...table,
      onAddItem,
      onDeleteItem,
      onUpdateItem,
      doRefresh,
      infoModal,
      infoList,
      lookInfo,
      lookInfo1,
      infoColumns
    }
  },
})
</script>
